<template>
  <div class='yun-page yun-report'>
      <div class='yun-blocks'>
          <div class='yun-block-item' 
            v-for='block in blockList'
            :key='block.key'
           @click='addBlockToScreen(block.key)'>
           {{block.label}}
          </div>
      </div>
      <div class='yun-screen'>
          <template v-for='(block,index) in dragBlockList'>
              <DragResize 
              :type='block.type' 
              :key='index'
              :option='block.option'
              :echartOption='block.echartOption' 
              @click.prevent.native='BlockClickEvent(block,index)'
              @updateOption='option=>updateOptionEvent(option,block)'
              @contextmenu.prevent.native="MouseRightClick($event, index)"
              ></DragResize>
          </template>
      </div>
      <div class='block-option'>
          <el-tabs >
            <el-tab-pane label="基础配置"><BlockForm v-if='blockIndex||blockIndex==0' :option='blockOption'></BlockForm></el-tab-pane>
            <el-tab-pane label="专项配置">
                <component v-if='blockIndex||blockIndex==0' :is='selectBlockType' :option='blockEchart'></component>
            </el-tab-pane>
        </el-tabs>
         
      </div>
      <rightMenu
        :visible.sync='showMenuFalg'
        :position='MenuPosition'
        @deletelayer="deletelayer"
        @moveupLayer="moveupLayer"
        @movedownLayer="movedownLayer"
      ></rightMenu>
  </div>
</template>

<script>
import DragResize from '@/components/DragResize.vue'
import rightMenu from './model/rightMenu.vue'
import BlockForm from './model/BlockForm.vue'
import EchartLine from './model/EchartLine.vue'
import EchartBar from './model/EchartBar.vue'
import echartconfig from './model/options.js'
export default {
    components: {
        DragResize,
        rightMenu,
        BlockForm,
        EchartLine,
        EchartBar
    },
    data(){
        return {
            blockList:[
                {
                    label:'线型图',
                    key:'EchartLine'
                },
                {
                    label:'柱状图',
                    key:'EchartBar'
                },
                {
                    label:'图片',
                    key:'DragImg'
                }
            ],
            dragBlockList:[],
            rightClickBlock:null,
            showMenuFalg:false,
            MenuPosition:{},
            blockIndex:null,
        }
    },
    computed: {
        blockOption:function(){
            return this.dragBlockList[this.blockIndex]&&this.dragBlockList[this.blockIndex].option || {}
        },
        selectBlockType:function(){
            return this.dragBlockList[this.blockIndex]&&this.dragBlockList[this.blockIndex].type || 'EchartBar'
        },
        blockEchart:function(){
            return this.dragBlockList[this.blockIndex]&&this.dragBlockList[this.blockIndex].echartOption || {}
        }
    },
    methods:{
        addBlockToScreen(key){
            this.clearBlocksActive()
            let echartOption = JSON.parse(JSON.stringify(echartconfig[key]))
            let block = {
                type:key,
                option:{
                    name:key,
                    width:300,
                    height:200,
                    top:0,
                    left:0,
                    zIndex:1,
                    active:false,
                    isDraggable:true,
                    isResizable:true
                },
                echartOption             
            }
            this.dragBlockList.push(block)
        },
        BlockClickEvent(block,index){
            this.blockIndex = index
        },
        updateOptionEvent(option,block){
        //    console.log(block,option)
           Object.assign(block.option,option)
           block.option.active=false
        },
        clearBlocksActive(){
            this.dragBlockList.forEach(block=>block.option.active=false)
        },
        MouseRightClick(event,index){
            this.rightClickBlock = index;
            const left = event.clientX;
            const top = event.clientY;
            if (left || top) {
                this.MenuPosition = {
                    left: left + "px",
                    top: top + "px",
                    display: "block"
                };
            }
            this.showMenuFalg = true;
        },
        deletelayer(){
            this.dragBlockList.splice(this.rightClickBlock, 1);
        },
        moveupLayer(){

        },
        movedownLayer(){

        }
    }
}
</script>

<style lang='less' scopted>
.yun-page{
    width:100%;
    height:100%;
    background: #101e44;
    display: flex;
    .yun-blocks{
        width:160px;
        height:100%;
        .yun-block-item{
            text-align: center;
            color:#fff;
            font-size:14px;
            line-height: 40px;
            border:1px solid #353434;
            cursor: pointer;
        }
    }
    .yun-screen{
        flex:1;
        height: 100%;
        border:1px solid #353434;
        background: rgb(15, 15, 15);
        position: relative;
        overflow: hidden;
    }
    .block-option{
        width:240px;
        padding:0 10px; 
    }
    
}

</style>
<style >
  .el-tabs__item{
                color:#2e67a1;
            }
</style>